<template>
    <div class="scroll" style="width: 598px; height: 580px; padding-left: 3px; padding-top: 8px; overflow-y: auto; " onmousemove="OnMouseMove(nil)" onmouseenter=onmouseenter onmouseleave=onmouseleave>
        <div v-for="goods in goodslist" class="goods" onmousemove="OnMouseMove(goods)">
            <div v-bind:style="GoodsStyle(goods)"></div>
            <div class="center" style="height: 30px; color: #000000;">{{goods.copies}}</div>
        </div>
        <GoodsTooltip ref="tooltip" class="goods-tooltip" v-bind:goods="hoverGoods"></GoodsTooltip>
    </div>
</template>

<script type="text/lua">
RegisterComponent("GoodsTooltip", "%vue%/Page/User/GoodsTooltip.html");

goodslist = _G.GetUserShowGoods();
hoverGoods = nil;
local ToolTipEl = nil;

function OnAttrValueChange()
end

function onmouseleave()
    hoverGoods = nil;
    if (ToolTipEl) then ToolTipEl:SetVisible(false) end
end

function onmouseenter()
end

function OnMouseMove(goods)
    local event = GetEvent();
    event:Accept();
    if (not ToolTipEl) then return end
    local windowX, windowY = event:GetWindowXY();
    windowX, windowY = windowX + 30, windowY + 30;
    ToolTipEl:SetStyleValue("left", windowX);
    ToolTipEl:SetStyleValue("top", windowY);
    ToolTipEl:SetPosition(windowX, windowY);
    hoverGoods = goods;
    ToolTipEl:SetVisible(hoverGoods and true or false);
end

function GoodsStyle(goods)
    return string.format("margin-top: 15px; margin-bottom: 15px; width: 128px; height: 64px; background:url(%s)", goods.icon);
end

function OnReady()
    ToolTipEl = GetRef("tooltip");
end
</script>

<style>
.goods {
    width: 146px;
    height: 140px;
    padding: 10px 9px 0px 9px;
    display: inline-block;
    background: url(Texture/Aries/Creator/keepwork/ggs/user/renwuqiehuan/wupingbj_146X140_32bits.png#0 0 146 140);
}

</style>
